<script type="text/javascript">
$(document).ready(function(){	
});
function AddtoCart(productid)
{
	var url;
	url= '?page=products&sub=addtoCart&pid=';	
	url = url + productid;
	window.location = url;
	//alert(url);
}
function add()
{
}
</script>
<div id="content">

<!-- LEFT START -->
<div id="left">
<h1>Product Categories</h1>
<ul>
<?php foreach($arrCategories as $category) : ?>
<li><a href="?page=products&sub=explore&category=<?= $category['categoryName']?>"><?= $category['categoryName']; ?></a></li>
<?php endforeach; ?>
</ul>
<div id="featured"><!-- FEATURED START -->
<h1>Featured Products</h1>
<img src="images/feature-item.png" /><br />
<a href="#" class="name">Name of the product</a><br />
<a href="#" class="price">$56.45</a>
</div><!-- FEATURED END -->

</div>
<!-- LEFT END -->

<!-- RIGHT START -->
<div id="right">
<div id="items" style="margin-top:0">
<h1>Category -&gt; <?= $categoryName; ?>  </h1>


<ul id="item">
<?php foreach ($arrImages as $images) : ?>

<li><a href="?page=productDetail&pid=<?=$images['productID'] ?>"><img src="images/products/<?=$images['imageName'] ?>" border="0" height="155" width="187" /></a><br />
<!--<li><a href="item_detail.html"><img src="images/item.png" border="0" /></a><br />
-->
<?= $images['productName'].'  '; ?>
<input type="button" name="add" id="add" value="Add to Cart" onclick="AddtoCart(<?=$images['productID'] ?>);" />
<br />
<!--<a href="?page=products&sub=addtoCart&pid=<?=$images['productID'] ?>"><img src="<?= $this-> template?>/images/cart.png" /></a>
-->
<?php endforeach; ?>
</li>

<!-- Just to increase height automatically --><div id="height_increaser"></div>
</ul>
</div>


</div>
<!-- RIGHT END -->

<!-- Just to increase height automatically --><div id="height_increaser"></div>
</div>